<template>
	<view>
		<heardData></heardData>
		<view class="content">
			<view class="orcode">
				<!-- <image ref="qrCodeUrl" :src="bufferImg" style="width: 250px;height: 250px"></image> -->
				 <canvas class="canvas" canvas-id="mycanvas" />
			</view>
			<view class="download">
				<view class="btn" @click="saveAlbum">下载二维码</view>
				<view class="btn" @click="getjump">跳转</view>
			</view>
		</view>
	</view>
</template>

<script>
	// import QRCode from 'qrcode'
	var OR = require('../../utils/qrcode.js')
	import heardData from "../../component/heard.vue" //组件引入
    export default {
		components: { heardData },
		data () {
			return {
				appid: 'wxa340eaac8cc7ec6f',
				secret: '9eed9afc5d2f755aea236451d75023a3',
				parm: '',
				bufferImg: '',
				maskData: '',
				tempFilePath: ''
			}
		},
		created () {
			this.getOrcode()
		},
        methods: {
			getjump () {
				uni.navigateTo({
				    url: `/pages/userorder/order?parm=${this.parm}`
				});
			},
			createOrCode (url, canvasId, cavW, cavH) {
				OR.api.draw(url, canvasId, cavW, cavH);
				setTimeout(() => {
					this.canvasToTempImage();
				}, 1000);
			},
			canvasToTempImage () {
				var that = this;
				wx.canvasToTempFilePath({
					canvasId: 'mycanvas',
					success: function (res) {
						console.log(res)
						var tempFilePath = res.tempFilePath;
						that.tempFilePath = tempFilePath
					},
					fail: function (res) {
						console.log(res);
					}
				});
			},
			getOrcode () {
				uni.showLoading({title: '加载中'})
				this.$request('mobile/getQrcodeInfo', 'post', {yhsj: uni.getStorageSync('mobile')}).then(res => {
					if (res.code == 200) {
						this.parm = res.data.parm
						this.createOrCode(`https://qilininfo.top:8443/#/pages/userorder/order?parm=${this.parm}`, 'mycanvas', 300, 300)
						uni.hideLoading()
					} else {
						uni.hideLoading()
					}
				})
			},
			saveAlbum() { //获取权限保存相册
				uni.getSetting({ //获取用户的当前设置
					success: (res) => {
						// console.log("获取权限",res);
						if (res.authSetting['scope.writePhotosAlbum']) { //验证用户是否授权可以访问相册
							this.saveImageToPhotosAlbum();
						} else {
							uni.authorize({ //如果没有授权，向用户发起请求
								scope: 'scope.writePhotosAlbum',
								success: () => {
									this.saveImageToPhotosAlbum();
								},
								fail: () => {
									uni.showToast({
										title: "请打开保存相册权限，再点击保存相册分享",
										icon: "none",
										duration: 3000
									});
									setTimeout(() => {
										uni.openSetting({ //调起客户端小程序设置界面,让用户开启访问相册
											success: (res2) => {
												// console.log(res2.authSetting)
											}
										});
									}, 3000);
								}
							})
						}
					}
				})
			},
			saveImageToPhotosAlbum() {
				let that = this
				uni.saveImageToPhotosAlbum({
					filePath: that.tempFilePath,
					success: function(res2) {
						uni.showToast({
							title: '保存成功，请从相册选择再分享',
							icon: "none",
							duration: 5000
						})
					},
					fail: function(err) {
						console.log(err.errMsg);
					}
				})
			},
			goNavData () {
				uni.navigateTo({
				    url: '/pages/orcode/index'
				});
			}
        }
    }
</script>

<style lang="scss">
	.orcode {
		text-align: center; margin-top: 100rpx;
		.canvas {
			width: 600rpx; height: 600rpx; display: inline-block;
		}
	}
	.download {
		text-align: center; position: fixed; bottom: 20%; left: calc(50% - 130rpx);
		.btn {
			display: inline-flex; width: 250rpx; height: 100rpx;
			justify-content: center; align-items: center; border-radius: 30rpx;
			background: rgba(91, 156, 214, 1); color: #fff;
		}
	}
</style>